<template>
    <div class="outmain ba_f selforder">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>饿了么订单</span>
            </div>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="待处理订单" name="2"></el-tab-pane>
            <el-tab-pane label="订单查询" name="1"></el-tab-pane>
        </el-tabs>
        <div class="bor_b_df5" v-show="activeName=='1'">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="150px">
                <div class="mar_t20">
                    <el-form-item label="下单日期：">
                        <span class="mar_l20">
                           <el-date-picker
                                   v-model="formInline.time"
                                   align="right"
                                   type="date"
                                   placeholder="选择日期"
                                   format="yyyy 年 MM 月 dd 日"
                                   @change="selectType">
                               </el-date-picker>
                            </span>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div>
            <order-state ref="orderState" :state="'0'" v-if="orderlist.length<=0"></order-state>
            <order-list ref="orderList" :list="orderlist" @initMethod="init"></order-list>
        </div>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="page.total"
                :page-size="page.size"
                :current-page.sync='page.currentPage'
                :hide-on-single-page="page.value"
                @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</template>
<script>
    import OrderState from "./components/orderState";
    import OrderList from "./components/elemOrderList";
    import {getEleOrder} from "@/api/order";
    import {changeDate} from "@/utils/index";

    export default {
        components: {OrderState,OrderList},
        created() {
            this.bus.$emit('loading', true);
            this.init();
        },
        data() {
            return {
                activeName:'2',
                formInline: {
                    time: '',
                },
                orderlist:[],
                page: {
                    total: 0,
                    size: 15,
                    currentPage: 1,
                },
            }
        },
        methods: {
            handleClick() {
                this.init()
            },
            async init(){
                var params = {
                    page: this.page.currentPage,
                    type: this.activeName,
                    time: this.activeName=='1' && this.formInline.time?changeDate(this.formInline.time):'',
                }
                const {data,count} = await getEleOrder(params);
                this.orderlist = data
                this.page.total = count;
                this.$emit('orderList',data)
                this.bus.$emit('loading', false)
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.init();
            },
            selectType(){
                this.init();
            },
        }
    }
</script>

